<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_函数式组件使用props</title>
    <link rel="shortcut icon" href="../../favicon.ico">
</head>
<body>
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--引入prop-types，用于对组件标签属性进行限制-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
    // 1、创建组件
    // class Person extends React.Component {
    //
    //     // 对标签属性进行类型、必要性的限制
    //     static propTypes = {
    //         name: PropTypes.string.isRequired,
    //         age: PropTypes.number,
    //         sex: PropTypes.string,
    //         speak: PropTypes.func
    //     }
    //     // 指定默认标签属性值
    //     static defaultProps = {
    //         sex: '不男不女',
    //         age: 18
    //     }
    //
    //     render() {
    //         const {name, sex, age} = this.props;
    //         // props是只读的
    //         // this.props.name = 'jack' // 此行代码会报错，因为props是只读的
    //         return (
    //             <ul>
    //                 <li>姓名：{name}</li>
    //                 <li>性别：{sex}</li>
    //                 <li>年龄：{age + 1}</li>
    //             </ul>
    //         );
    //     }
    // }

    function Person(props) {
        const {name, sex, age} = props;
        return (
            <ul>
                <li>姓名：{name}</li>
                <li>性别：{sex}</li>
                <li>年龄：{age + 1}</li>
            </ul>
        );
    }

    Person.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
        sex: PropTypes.string,
        speak: PropTypes.func
    }
    // 指定默认标签属性值
    Person.defaultProps = {
        sex: '不男不女',
        age: 18
    }

    // 渲染组件到页面
    ReactDOM.render(<Person name="Tom"/>, document.getElementById('test'));
</script>
</body>
</html>